<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
    <script src="js/lCalendar.js"></script>
    <link rel="stylesheet" href="css/lCalendar.css">

</head>
<style>
    input[type=button]{
        background: #fff;
        border: none;
        width: 43%;

    }
</style>
<body style="background: #EFEFEF;">
<style>
</style>
<script>
    $(function(){
         $('.change' ).click(function(){
            $(this ).prev('input' ).focus()
         })

        $(".wx02 li label" ).click(function(){
            $(".wx02 li label" ).removeClass('open-label' ).addClass('close-label')
            $(this ).addClass('open-label' ).removeClass('close-label')

        })


     })
</script>
  <div class="container">
      <ul class="wx02 white-bg wx02-first">
          <li>
              <span class="input-title">订阅类型</span>
              <span class="sub-text input-radio"><input type="radio" id="c_0">
                  <label for="c_0" class="open-label"></label>定时推送</span>
              <span class="sub-text input-radio"><input type="radio" checked id="c_1">
                  <label for="c_1" class="close-label"></label>及时推送</span>
          </li>
          <li>
              <span class="input-title">订阅日期</span>
             <!--<span class="sub-text input-text-pre">2016年9月30日</span>-->
              <!--<input id="datetime" class="kbtn sub-text input-text hidden-input" type="date" value="2016-10-30">-->
              <input  id="date" type="button" value="2016-10-13"  data-lcalendar="2011-01-1,2019-12-31" />
              <button class="button change">修改日期</button>
          </li>
          <li>
              <span class="input-title">推送时间</span>
              <!--<span class="sub-text input-text-pre">上午9：00</span>-->
              <input id="time" type="button" value="12:00:00">
              <button class="button change">修改时间</button>
          </li>
      </ul>
      <div id="datePlugin"></div>
      <ul class="wx02 white-bg wx02-second">
          <li>
              <span class="input-title">每周重复</span>
              <span class="sub-text jiantou">周一,周二,周三</span>
          </li>
      </ul>
      <ul class="wx02 white-bg wx02-third overflow">
          <li>
              <span class="input-title">路线名称</span>
              <select>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
              </select>
          </li>
          <li>
              <span class="input-title">开始路段</span>
              <select>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
              </select>
          </li>
          <li class="overflow" style="clear: both;">
              <span class="input-title">结束路段</span>
              <select>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
              </select>
          </li>
          <li>
              <span class="input-title">道路方向</span>
              <select class="multiple" multiple="multiple" size="8">
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
                  <option>请选择路线名称</option>
              </select>
          </li>
          <li class="last overflow">
              <button class="overflow save">保存</button>
          </li>
      </ul>
  </div>
<script>
    var calendar = new lCalendar();
    calendar.init({
        'trigger': '#date',
        'type': 'date'
    });

    var calendartime = new lCalendar();
    calendartime.init({
        'trigger': '#time',
        'type': 'time'
    });
</script>
</body>
</html>